<template>
    <div class="padding20">
        <el-row style="margin-bottom: 7px">
            <el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
                <el-form-item  >
                    <el-input v-model="queryForm.id" autocomplete="off" placeholder="请输入唯一主键" clearable></el-input>
                </el-form-item>

                <el-form-item  >
                    <el-input v-model="queryForm.memberId" autocomplete="off" placeholder="请输入会员id" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.realName" autocomplete="off" placeholder="请输入真实姓名" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.cardNum" autocomplete="off" placeholder="请输入身份证号" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.imgFront" autocomplete="off" placeholder="请输入身份证正面照片" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.imgBack" autocomplete="off" placeholder="请输入身份证背面照片" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.birthday" autocomplete="off" placeholder="请输入出生日期" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.address" autocomplete="off" placeholder="请输入住址" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.validityDate" autocomplete="off" placeholder="请输入证件有效期" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.issuingAuthority" autocomplete="off" placeholder="请输入发证机关" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.nation" autocomplete="off" placeholder="请输入民族" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.gender" autocomplete="off" placeholder="请输入性别" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.createUser" autocomplete="off" placeholder="请输入创建者" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.createTime" autocomplete="off" placeholder="请输入创建时间" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.updateUser" autocomplete="off" placeholder="请输入更新者" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.updateTime" autocomplete="off" placeholder="请输入更新时间" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.status" autocomplete="off" placeholder="请输入状态" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.isDeleted" autocomplete="off" placeholder="请输入删除状态 YesNoEnum。 yes删除；no未删除" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.cardType" autocomplete="off" placeholder="请输入营业执照类型" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.person" autocomplete="off" placeholder="请输入法定代表人" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.capital" autocomplete="off" placeholder="请输入注册资本" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.business" autocomplete="off" placeholder="请输入经营范围" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.enterpriseName" autocomplete="off" placeholder="请输入公司名称" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.creditCode" autocomplete="off" placeholder="请输入统一社会信用代码" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.regDate" autocomplete="off" placeholder="请输入成立日期" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.businessTerm" autocomplete="off" placeholder="请输入营业期限" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.residence" autocomplete="off" placeholder="请输入住所" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.regAuthority" autocomplete="off" placeholder="请输入登记机关" clearable></el-input>
                </el-form-item>

                <el-form-item  v-show="collapse.flag" >
                    <el-input v-model="queryForm.awardDate" autocomplete="off" placeholder="请输入发证日期" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="medium" icon="el-icon-search" @click="queryList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="handleCollapseState"
                    >{{ collapse.label }}<i :class="collapse.icon"></i
                    ></el-button>
                </el-form-item>
            </el-form>
            <el-button
                    type="primary"
                    size="medium"
                    icon="el-icon-plus"
                    v-if="$tools.hasPermission('member:realinfo:memberRealinfo:save')"
                    @click="handleEdit()"
            >添加</el-button
            >
            <el-button
                    v-if="$tools.hasPermission('member:realinfo:memberRealinfo:deleteBatch')"
                    size="medium"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDeleteBatch()"
            >删除</el-button
            >
            <div style="float: right; padding-right: 17px">
                <i
                        class="el-icon-refresh"
                        style="margin-right: 10px; cursor: pointer"
                        @click="queryList"
                ></i>

                <el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
                    <el-checkbox-group v-model="tableShowList">
                        <el-checkbox
                                v-for="item in tableList"
                                :label="item.propName"
                                :key="item.propName"
                                :value="item.propName"
                        >{{ item.propDesc }}</el-checkbox
                        >
                    </el-checkbox-group>
                    <i
                            slot="reference"
                            class="el-icon-s-operation"
                            style="cursor: pointer"
                    ></i>
                </el-popover>
            </div>
        </el-row>
        <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
        >
            <el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

            <el-table-column
              v-if="$tools.isShow('id', tableShowList)"
              prop="id"
              label="唯一主键"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('memberId', tableShowList)"
              prop="memberId"
              label="会员id"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('realName', tableShowList)"
              prop="realName"
              label="真实姓名"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('cardNum', tableShowList)"
              prop="cardNum"
              label="身份证号"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('imgFront', tableShowList)"
              prop="imgFront"
              label="身份证正面照片"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('imgBack', tableShowList)"
              prop="imgBack"
              label="身份证背面照片"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('birthday', tableShowList)"
              prop="birthday"
              label="出生日期"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('address', tableShowList)"
              prop="address"
              label="住址"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('validityDate', tableShowList)"
              prop="validityDate"
              label="证件有效期"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('issuingAuthority', tableShowList)"
              prop="issuingAuthority"
              label="发证机关"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('nation', tableShowList)"
              prop="nation"
              label="民族"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('gender', tableShowList)"
              prop="gender"
              label="性别"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    v-if="$tools.isShow('createUser', tableShowList)"
                    prop="createUserName"
                    label="创建者"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('createTime', tableShowList)"
              prop="createTime"
              label="创建时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('updateUser', tableShowList)"
              prop="updateUser"
              label="更新者"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('updateTime', tableShowList)"
              prop="updateTime"
              label="更新时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('status', tableShowList)"
              prop="status"
              label="状态"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('isDeleted', tableShowList)"
              prop="isDeleted"
              label="删除状态 YesNoEnum。 yes删除；no未删除"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('cardType', tableShowList)"
              prop="cardType"
              label="营业执照类型"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('person', tableShowList)"
              prop="person"
              label="法定代表人"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('capital', tableShowList)"
              prop="capital"
              label="注册资本"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('business', tableShowList)"
              prop="business"
              label="经营范围"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('enterpriseName', tableShowList)"
              prop="enterpriseName"
              label="公司名称"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('creditCode', tableShowList)"
              prop="creditCode"
              label="统一社会信用代码"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('regDate', tableShowList)"
              prop="regDate"
              label="成立日期"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('businessTerm', tableShowList)"
              prop="businessTerm"
              label="营业期限"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('residence', tableShowList)"
              prop="residence"
              label="住所"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('regAuthority', tableShowList)"
              prop="regAuthority"
              label="登记机关"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('awardDate', tableShowList)"
              prop="awardDate"
              label="发证日期"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="180">
                <template slot-scope="scope">
                    <el-button
                            v-if="$tools.hasPermission('member:realinfo:memberRealinfo:info')"
                            size="mini"
                            plain
                            @click="handleInfo(scope.row.id)"
                    >详情</el-button
                    >
                    <el-button
                            v-if="$tools.hasPermission('member:realinfo:memberRealinfo:edit')"
                            size="mini"
                            plain
                            @click="handleEdit(scope.row.id)"
                    >编辑</el-button
                    >
                    <el-button
                            v-if="$tools.hasPermission('member:realinfo:memberRealinfo:delete')"
                            size="mini"
                            plain
                            type="danger"
                            @click="handleDelete(scope.row)"
                    >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
        <!-- 新增、编辑 -->
        <form-edit
                v-if="formEditVisible"
                ref="formEdit"
                @refreshData="queryList"
        ></form-edit>
        <!-- 详情 -->
        <form-info v-if="formInfoVisible" ref="formInfo"></form-info>
    </div>
</template>
<script>
    import { memberrealinfoPage, memberrealinfoDel, memberrealinfoDelBatch, } from "@/api/member/realinfo/memberrealinfo.js";
    import { viewTableList } from "@/api/public.api.js";
    import FormEdit from "./memberrealinfo-edit";
    import FormInfo from "./memberrealinfo-info";
    import FortressPagination from "@/components/fortress-pagination.vue";
    
    export default {
        data() {
            return {
                tableData: [],
                formEditVisible: false,
                formInfoVisible: false,
                queryForm: {
                        id:"",
                        memberId:"",
                        realName:"",
                        cardNum:"",
                        imgFront:"",
                        imgBack:"",
                        birthday:"",
                        address:"",
                        validityDate:"",
                        issuingAuthority:"",
                        nation:"",
                        gender:"",
                        createUser:"",
                        createTime:"",
                        updateUser:"",
                        updateTime:"",
                        status:"",
                        isDeleted:"",
                        cardType:"",
                        person:"",
                        capital:"",
                        business:"",
                        enterpriseName:"",
                        creditCode:"",
                        regDate:"",
                        businessTerm:"",
                        residence:"",
                        regAuthority:"",
                        awardDate:"",
                },
                page: {
                    current: 1,
                    size: 10,
                    total: 0,
                },
                collapse: {
                    icon: "el-icon-arrow-down el-icon--right",
                    label: "展开",
                    flag: false,
                },
                tableList: [],
                tableShowList: [],
            };
        },
        components: {
            "form-edit": FormEdit,
            "form-info": FormInfo,
            pagination: FortressPagination,
        },
        created() {
            this.initTableList();
            this.queryList();
        },
        methods: {
            //查询表格数据
            queryList(page) {
                if (page) {
                    this.page.current = page.current?page.current:this.page.current;
                    this.page.size = page.size?page.size:this.page.size;
                }
                this.queryForm.current = this.page.current;
                this.queryForm.size = this.page.size;
                memberrealinfoPage(this.queryForm).then((resp) => {
                    if (resp.code == 0) {
                        this.tableData = resp.data.records;
                        this.page.total = resp.data.total;
                    } else {
                        this.$msg({
                            message: resp.msg,
                            type: "error",
                        });
                    }
                });
            },
            //打开编辑窗口
            handleEdit(id) {
                this.formEditVisible = true;
                this.$nextTick(() => {
                    this.$refs.formEdit.init(id);
                });
            },
            //打开详情窗口
            handleInfo(id) {
                this.formInfoVisible = true;
                this.$nextTick(() => {
                    this.$refs.formInfo.init(id);
                });
            },
            //删除
            handleDelete(row) {
                this.$confirm('确认删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        memberrealinfoDel(row.id).then((resp) => {
                        if (resp.code == 0) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                           //判断是否最后一页的最后一条记录
                           let totalPages =
                              (this.page.total - 1) % this.page.size == 0
                                  ? (this.page.total - 1) / this.page.size
                                  : (this.page.total - 1) / this.page.size + 1;
                           if (this.page.current > totalPages && this.page.current != 1) {
                            this.page.current = this.page.current - 1;
                           }
                            this.queryList();
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }).catch(() => {
                });
            },
            //批量删除
            handleDeleteBatch() {
                let checkedRow = this.$refs.multipleTable.selection;
                if (checkedRow.length > 0) {
                    let ids = [];
                    checkedRow.forEach((item) => {
                        ids.push(item.id);
                    });
                    this.$confirm("确认删除该记录, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                            .then(() => {
                                memberrealinfoDelBatch(ids).then((resp) => {
                                    if (resp.code == 0) {
                                        this.$message({
                                            type: "success",
                                            message: "操作成功!",
                                        });
                                      //判断是否最后一页的最后一条记录
                                      let totalPages =
                                          (this.page.total - checkedRow.length) % this.page.size == 0
                                              ? (this.page.total - checkedRow.length) / this.page.size
                                              : (this.page.total - checkedRow.length) / this.page.size +
                                              1;
                                      if (this.page.current > totalPages && this.page.current != 1) {
                                        this.page.current = this.page.current - 1;
                                      }
                                        this.queryList();
                                    } else {
                                        this.$msg({
                                            message: resp.msg,
                                            type: "error",
                                        });
                                    }
                                });
                            })
                            .catch(() => {});
                } else {
                    this.$msg({
                        message: "请选择数据进行删除",
                        type: "error",
                    });
                }
            },
            //重置查询框
            resetQueryForm() {
                this.queryForm = {
                        id:"",
                        memberId:"",
                        realName:"",
                        cardNum:"",
                        imgFront:"",
                        imgBack:"",
                        birthday:"",
                        address:"",
                        validityDate:"",
                        issuingAuthority:"",
                        nation:"",
                        gender:"",
                        createUser:"",
                        createTime:"",
                        updateUser:"",
                        updateTime:"",
                        status:"",
                        isDeleted:"",
                        cardType:"",
                        person:"",
                        capital:"",
                        business:"",
                        enterpriseName:"",
                        creditCode:"",
                        regDate:"",
                        businessTerm:"",
                        residence:"",
                        regAuthority:"",
                        awardDate:"",
                };
            },
            //切换查询条件收缩框
            handleCollapseState() {
                this.collapse.flag = !this.collapse.flag;
                if (this.collapse.flag) {
                    this.collapse.icon = "el-icon-arrow-up el-icon--right";
                    this.collapse.label = "收起";
                } else {
                    this.collapse.icon = "el-icon-arrow-down el-icon--right";
                    this.collapse.label = "展开";
                }
            },
            //视图表格列表初始化
            initTableList() {
                viewTableList("member_realinfo").then((resp) => {
                    if (resp.code == 0) {
                        this.tableList = resp.data;
                        this.tableList.forEach((item) => {
                            this.tableShowList.push(item.propName);
                        });
                    }
                });
            },
        },
    };
</script>
<style scoped>
</style>